<template>
<div id="outbox">
	<div class="planner">理财师：{{recordGetData.empName}} {{recordGetData.createPeople}}</div>
	<div class="activityCon">

	  <div class="topCon">
		<div class="topImgBox">
		  <img src="../../../img/date.png" alt="" v-if="recordGetData.trackType== '0'">
		  <img src="../../../img/email.png" alt="" v-if="recordGetData.trackType== '2'">
		  <img src="../../../img/phone.png" alt="" v-if="recordGetData.trackType== '3'">
		  <img src="../../../img/wechat.png" alt="" v-if="recordGetData.trackType== '1'">
		</div>

		<div class="clientMsg">
		  <div class="clientName">{{map.trackTypeArr[recordGetData.trackType]}}客户{{recordGetData.customerName}}</div>
		  <div class="visit">陪访人员：{{map.talkWithArr[recordGetData.talkWith]}} {{recordGetData.accompanyingVisitsName}} ({{recordGetData.accompanyingVisits}})</div>
		</div>
	  </div>
	  <!-- 内容信息 -->
	  <div class="contentCon " :class="feedbackStatus ? 'noRadius' : ''">
		<!-- 信息 -->
		<div class="listCon">
		  <div class="basicInfo">
			<p>客户约访地点：<span class="fontWeight">{{map.placeArr[recordGetData.place]}}</span></p>
			<p>投资金额：<span class="fontWeight">{{recordGetData.investAmount}}万</span></p>
			<p>投资到账时间：<span class="fontWeight">{{recordGetData.accountingDate}}</span></p>
			<p>是否提出再见面：<span class="fontWeight">{{map.seeAgainArr[recordGetData.seeAgain]}}</span></p>
			<p>陪访确认：<span class="fontWeight">{{map.visitsConfirmArr[recordGetData.visitsConfirm]}}</span></p>
		  </div>
		  <div class="visitInfo">
			<h2>客户痛点</h2>
			<p>{{recordGetData.content}}</p>
		  </div>
		</div>
		<!-- 信息 -->
		<div class="evaluate" v-if="!feedbackStatus && recordGetData.talkWith != 4">
		  <div class="seeMoreLine"></div>
		  <h2>陪访人反馈</h2>
		  <p>{{recordGetData.feedback}}</p>
	  	</div>
	  </div>
	  	<div class="bottomBox" v-if="feedbackStatus && recordGetData.talkWith != 4"></div>
		<div class="estimate" v-if="feedbackStatus && recordGetData.talkWith != 4">
			<textarea v-model="message" :placeholder="placerHolderTxt" class="iconfont " maxlength="100" style="line-height: 0.7rem;"></textarea>
		</div>
	  <!-- 内容信息 -->
	  <bottom-fixedbutton btnText="确定" v-if="feedbackStatus && recordGetData.talkWith != 4" @clickbottomFixedBtn="sureBtn()"></bottom-fixedbutton>

	  
  </div>
  <!-- 陪访人为fc的时候 -->
	<div class="fcbox" v-if="recordGetData.talkWith == 4">
		<div class="tzoption" v-for="(item,index) in map.choseOption">
			<div>
               {{item}}&nbsp;<span class="star" v-if="index != 2 && index != 4">*</span>
			</div>
			<span class="chose" @click="chose(index)" v-if="index == 0 && feedbackStatus" htmdEvt='investment_chose'>{{investment.length == 0 ? '请选择' : investment.join(' ')}}&nbsp;<i class="iconfont" style="font-size:.6rem">&#xe653;</i></span>
			<span class="chose" @click="chose(index)" v-if="index == 1 && feedbackStatus" htmdEvt='riskBearing_chose'>{{riskBearing ? riskBearing : '请选择'}}&nbsp;<i class="iconfont" style="font-size:.6rem">&#xe653;</i></span>
			<span class="chose" @click="chose(index)" v-if="index == 2 && feedbackStatus" htmdEvt='recommend_chose'>{{recommend.length == 0 ? '请选择' : recommend.join(' ')}}&nbsp;<i class="iconfont" style="font-size:.6rem">&#xe653;</i></span>
			<span class="chose" @click="chose(index)" v-if="index == 3 && feedbackStatus" htmdEvt='proName_chose'>{{proName ? proName : '请选择'}}&nbsp;<i class="iconfont" style="font-size:.6rem">&#xe653;</i></span>
			<span class="chose" @click="chose(index)" v-if="index == 4 && feedbackStatus" htmdEvt='contime_chose'>{{contime ? contime : '请选择'}}&nbsp;<i class="iconfont" style="font-size:.6rem">&#xe653;</i></span>


			<span class="chose" v-if="index == 0 && !feedbackStatus">{{recordGetData.investmentExperienceFormat}}</span>
			<span class="chose" v-if="index == 1 && !feedbackStatus">{{recordGetData.riskCapacity == 0 ? '高' : recordGetData.riskCapacity == 1 ? '中' : '低'}}</span>
			<span class="chose" v-if="index == 2 && !feedbackStatus">{{recordGetData.recommendProductTypeFormat}}</span>
			<span class="chose" v-if="index == 3 && !feedbackStatus">{{recordGetData.recommendProductName}}</span>
			<span class="chose" v-if="index == 4 && !feedbackStatus">{{recordGetData.nextMeetingTime}}</span>

		</div>
		<!-- 客户态度及兴趣点 -->
		<div class="interestpoint">
		   客户态度及兴趣点&nbsp;<span class="star">*</span>
		</div>
		<!-- 客户兴趣输入框 -->
		<div class="textbox">
           <textarea v-model="cusinterst" placeholder="请填写" class="iconfont" maxlength="200" style="line-height: 0.7rem;" v-if="recordGetData.customerAttitude == null"></textarea>
		   <p class="showCus" v-else>
              {{recordGetData.customerAttitude}}
		   </p>
		</div>
        <!-- 理顾表现 -->
		<div class="interestpoint">
		   理顾表现&nbsp;<span class="star">*</span>
		</div>
		<!-- 理顾表现输入框 -->
		<div class="textbox" style="margin-bottom: 1.5rem">
           <textarea v-model="message" placeholder="请填写" class="iconfont " maxlength="100" style="line-height: 0.7rem;" v-if="recordGetData.feedback == null"></textarea>
		   <p class="showCus" v-else>
			   {{recordGetData.feedback}}
		   </p>
		</div>
		<!-- 确认按钮 -->
		<button class="consubmit" @click="submitMessage" v-if="recordGetData.visitsConfirm == 0" htmdEvt='remind_btn'>确&nbsp;认</button>
	</div>
	<!-- 弹层选项框 -->
	<mt-popup v-model="popupVisible" position="bottom" style="width:100%">
	  <!-- 投资经历复选框 -->
        <mt-checklist
		    v-show="optionIndex == 0"
			title="投资经历(多选)"
			v-model="investment"
			:options="['银行理财', '信托', '保险', '证券类私募基金', '定融', '资产管理计划', '现金', '其他']">
       </mt-checklist>
	   <!-- 风险承受能力单选 -->
	   <mt-radio
	        v-show="optionIndex == 1"
			title="风险承受能力"
			v-model="riskBearing"
			:options="['高', '中', '低']">
       </mt-radio>
	   <!-- 建议推荐产品类型 -->
	   <mt-checklist
		    v-show="optionIndex == 2"
			title="建议推荐产品(多选)"
			v-model="recommend"
			:options="['现金管理', '固收', '股权', '证券', '公募', '保险或海外', '暂无']">
       </mt-checklist>
       
	    <!-- 推荐产品名称弹出框 -->
        <div class="searchList" v-show="optionIndex == 3">
			<div style="height:2.9rem"></div>
			<form class="search-block" action="javascript:void 0">
		      <input type="search" v-model="searchMessage" @keyup.13="tapToSearch" placeholder="请输入...">
			  <span @click="cancelPro">取消</span>
	        </form>
			<div class="outBox">
			<div class="searchproList" v-for="(item,index) in searchResult" :key="index" @click="checkPro(item.projectId,item.projectName)" :style="index == 0 ? 'margin-top:0' : ''">
               <p>{{item.projectName}}</p>
			</div>
			</div>
		</div>
    </mt-popup>
	

	<!-- 建议下次见面时间组件 -->
	<mt-datetime-picker
		ref="picker"
		type="date"
		v-model="pickerValue"
		year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
		@confirm="handleConfirm"
		@cancel="handleCancel"
		:startDate="startDate">
    </mt-datetime-picker>
</div>
  
  
</template>

<script>
// import "./remind.js"
import bottomFixedbutton from '@src/common/bottomFixedbutton/bottomFixedbutton.vue'
// import feedbackAffirm from '@src/common/feedbackAffirm/feedbackAffirm.vue'
// import tipAction from "@common/components/otherComponents/tipAction/tipAction"
// import searchList from '@src/common/searchList_13/searchList'
// import moment from 'moment'
const ModalHelper = (function(bodyCls){
      var scrollTop;
      return{

          afterOpen:function(){

              scrollTop = document.scrollingElement.scrollTop;

              document.body.classList.add(bodyCls);

              document.body.style.top = -scrollTop+'px';

          },

          beforeClose:function(){

              document.body.classList.remove(bodyCls);

              document.scrollingElement.scrollTop = scrollTop;

          }

      }

  })('modal-open');
export default {
  components:{
	  bottomFixedbutton,
	  // feedbackAffirm,
  },
  data(){
	return{
	  placerHolderTxt: '\ue600 请填写您的反馈…',
	  feedbackStatus: true,
	  popupVisible: false,
	  optionIndex: '',
	  searchMessage: '', //搜索信息
	  investment: [], //投资经历复选框
	  riskBearing: '', //风险承受能力单选
	  recommend: [], //建议推荐产品复选框
	  pickerValue: '', //下次见面时间选择
	  proName: '', //推荐产品名称
	  recommendProductId: '',  //推荐产品id
	  contime: '',
	  startDate: new Date(), //日期开始日期
	  message: '',
	  cusinterst: '', //客户兴趣
	  performance: '', //理顾表现
	  apiId: '',
	  searchResult: [], //搜索结果
	  recordGetData: {
		talkWith: 1,
		commentUserName: 132,
		commentUserCode: "H021237",
		place: 1,
	  },
	  map: {
			talkWithArr: ['','营总','团队长','IS','FC','同事帮谈','无'],
			placeArr: ['','公司','非公司','沙龙、活动'],
			seeAgainArr: ['','是','否'],
			trackTypeArr:['约见','微信','邮件','电话'],
			visitsConfirmArr:['未确认','已确认'],
			choseOption:['投资经历','风险承受能力','建议推荐产品','推荐产品名称','建议下次见面时间']
	  },
	  
	}
	
  },
  created:function(){
	this.apiId = splitUrl()['id']
	this.saveEva();
  },
  mounted() {
	  
         
      
  },
  methods:{
	chose(index){
	   console.log('传过来',index)
	   if(index == 4){
		   this.$refs.picker.open();
		   return false
	   }else if(index == 3){
		   setTimeout(()=>{
               this.proSearch()
		   },200)
	   }
	   this.optionIndex = index
	   this.popupVisible = true
	},
	// 搜索产品取消搜索
	cancelPro(){
		this.popupVisible = false
	},
	// 点击选中方法
	checkPro(id,name){
		console.log(id,name)
		this.proName = name
		this.recommendProductId = id
		this.popupVisible = false
	},
	// 搜索方法
	tapToSearch() {
	   console.log('11111',this.searchMessage)
	   this.showDiv = true
	   document.activeElement.blur()
	   this.proSearch()
	},
	// 产品搜索接口
	proSearch(){
        this.$axiosHttp.http({
		  method: "POST",
		  url: apiUrl.searchPro,
		  params:{
			productName: this.searchMessage,
			pageNum: 1,
			pageSize: 100
		  }
		}, (res) => {
			console.log(res.data)
			this.searchResult = res.data.data
		}, res => {
			
		})
	},
	// 日期确认
	handleConfirm(value) {
		this.timeconfirm = true
		this.contime = this.$utils.momentFmtYmd2(value);
		// this.contime = moment(value).format('YYYY-MM-DD')
		
	},
	// mint日期组件取消按钮回调
	handleCancel() {
		console.log(33333)
		
	},
	searchCallback( item ){
		console.log(item)
		this.proName = item
    },
	saveEva(){
		this.$axiosHttp.http({
		  method: "GET",
		  url: apiUrl.recordGetApi,
		  params:{
			id: this.apiId
			// id: '101953'
		  }
		}, (res) => {
			// 1是已确认
			if(res.data.data.visitsConfirm == 1) { 
				this.feedbackStatus = false;
			} else{
				this.feedbackStatus = true;
			}
			// this.feedbackStatus = true;
			this.recordGetData = res.data.data;
		}, res => {
			
		})
	},
	submitMessage(){
       this.sureBtn()
	},
	sureBtn(){
		console.log(this.investment)
		// debugger
		let riskData,investmentExperience,recommendProductType,paramsData
		if(this.recordGetData.talkWith == 4){
             if(this.message == "") {
				this.$toast("请填写理顾表现");
				return false;
			}else if(this.investment.length == 0){
				this.$toast('请选择投资经历')
				return false
			}else if(this.riskBearing == ""){
				this.$toast('请选择风险承受能力')
				return false
			}else if(this.recommendProductId == ''){
				this.$toast('请选择推荐产品名称')
				return false
			}else if(this.cusinterst == ''){
				this.$toast('请填写客户态度及兴趣点')
				return false
			}
			if(this.riskBearing == '高'){
				riskData = 0
			}else if(this.riskBearing == '中'){
				riskData = 1
			}else{
				riskData = 2
			}
		investmentExperience = this.investment.map((item)=>{
             if(item == '银行理财'){
				 return 0
			 }else if(item == '信托'){
                 return 1
			 }else if(item == '保险'){
                 return 2
			 }else if(item == "证券类私募基金"){
                 return 3
			 }else if(item == '定融'){
                 return 4
			 }else if(item == '资产管理计划'){
                 return 5
			 }else if(item == '现金'){
                 return 6
			 }else if(item == '其他'){
				 return 7
			 }
		})
		recommendProductType = this.recommend.map((item)=>{
             if(item == '现金管理'){
				 return 0
			 }else if(item == '固收'){
                 return 1
			 }else if(item == '股权'){
                 return 2
			 }else if(item == '证券'){
                 return 3
			 }else if(item == '公募'){
                 return 4
			 }else if(item == '保险或海外'){
                 return 5
			 }else if(item == '暂无'){
				 return 6
			 }
		})
		paramsData = {
				id: this.apiId,
				// id: '108402',
				feedback: this.message,
				investmentExperience: investmentExperience.join(','),
				riskCapacity: riskData,
				recommendProductType: recommendProductType.join(','),
				recommendProductId: this.recommendProductId,
				recommendProductName: this.proName,
				nextMeetingTime: this.contime,
				customerAttitude: this.cusinterst
		}
	 }else{
		console.log('进入这里')
		if(this.message == ''){
			this.$toast('请填写陪访人反馈')
			return false
		}
		paramsData = {
			id: this.apiId,
			// id: '108402',
			feedback: this.message,
		}
        console.log(paramsData)
	 }
		this.$axiosHttp.http({
			url: apiUrl.updateFeedBackApi,
			params: paramsData,
		}, (res) => {
			window.location.href = '/lgb/taskManager/remind/remindList.html';

		}
		// , res => {
		// 	this.$toast(res.data.message);
		// }
		)

	},
  },
  watch: {
        popupVisible: function (val) {
          if(val) {
			  console.log('打开')
			  ModalHelper.afterOpen()
          } else {
			  console.log('关闭')
			  ModalHelper.beforeClose()
          }
		}
    }

}
</script>


<style lang="less">
@import './remind.less';
</style>
